<template>
    <n-card style="margin-bottom: 16px; height: 100%;">
        <n-tabs type="line">
            <n-tab-pane name="greatReview" tab="4-5星" style="height: 100%">
                <div>
                    <n-form ref="form"
                            :model="searchCondition"
                            label-placement="left"
                            label-align="right"
                            label-width="80px"
                            :show-require-mark="false">
                        <div>
                            <div class="grid md:flex md:flex-wrap md:gap-x-1">
                                <n-form-item>
                                    <label style="width: 70px;">订单编号：</label>
                                    <n-input style="width: 150px;" v-model:value="searchCondition.orderId" placeholder="输入订单编号" clearable/>
                                </n-form-item>
                                <n-form-item style="margin-left: 10px">
                                    <label style="width: 70px;">产品名称：</label>
                                  <n-input style="width: 150px;" v-model:value="searchCondition.productName" placeholder="输入产品名称" clearable/>
                                </n-form-item>
                                <n-form-item style="margin-left: 10px">
                                    <label style="width: 50px;">店铺：</label>
                                    <n-select v-model:value="searchCondition.shopId"
                                              :options="shops"
                                              style="width: 150px;"
                                              filterable
                                              clearable
                                    />
                                </n-form-item>
                                <n-form-item style="margin-left: 10px">
                                    <n-button type="primary" style="margin-left: 10px" @click="searchByCondition">筛选</n-button>
                                </n-form-item>
                                <n-form-item>
                                    <n-button type="primary" style="margin-left: 10px" @click="showForm=true">添加评价</n-button>
                                </n-form-item>
                                <n-form-item>
                                    <n-button type="error" style="margin-left: 10px" @click="deleteSelectReviews">批量删除</n-button>
                                </n-form-item>
                            </div>
                        </div>
                    </n-form>
                    <n-data-table
                        remote
                        :single-line="false"
                        ref="table"
                        :columns="columns"
                        :data="reviewList"
                        :loading="loading"
                        :pagination="paginationReactive"
                        :row-key="rowKey"
                    />
                </div>
            </n-tab-pane>
            <n-tab-pane name="badReview" tab="1-3星">
                <div>
                    <n-form ref="form"
                            :model="searchCondition"
                            label-placement="left"
                            label-align="right"
                            label-width="80px"
                            :show-require-mark="false">
                        <div>
                            <div class="grid md:flex md:flex-wrap md:gap-x-1">
                                <n-form-item>
                                    <label style="width: 70px;">订单编号：</label>
                                    <n-input style="width: 150px;" v-model:value="searchCondition.orderId" placeholder="输入订单编号" clearable/>
                                </n-form-item>
                                <n-form-item style="margin-left: 10px">
                                    <label style="width: 70px;">产品名称：</label>
                                  <n-input style="width: 150px;" v-model:value="searchCondition.orderId" placeholder="输入产品名称" clearable/>
                                </n-form-item>
                                <n-form-item style="margin-left: 10px">
                                  <label style="width: 50px;">店铺：</label>
                                  <n-select v-model:value="searchCondition.shopId"
                                            :options="shops"
                                            style="width: 150px;"
                                            filterable
                                            clearable
                                  />
                                </n-form-item>
                                <n-form-item style="margin-left: 10px">
                                    <n-button type="primary" style="margin-left: 10px" @click="searchByCondition">筛选</n-button>
                                </n-form-item>
                                <n-form-item>
                                    <n-button type="primary" style="margin-left: 10px" @click="showForm=true">添加评价</n-button>
                                </n-form-item>
                                <n-form-item>
                                    <n-button type="error" style="margin-left: 10px">批量删除</n-button>
                                </n-form-item>
                            </div>
                        </div>
                    </n-form>
                    <n-data-table
                        remote
                        :single-line="false"
                        ref="table"
                        :columns="columns"
                        :data="reviewList1"
                        :loading="loading"
                        :pagination="paginationReactive"
                        :row-key="rowKey"
                    />
                </div>
            </n-tab-pane>
        </n-tabs>
    </n-card>
</template>
<script setup>
import {h, onMounted, reactive, ref} from 'vue'
import api from '@/api/admin';
import {useUserStore} from '@/store';
import {useRouter} from 'vue-router';
import ReviewActions from "./components/customer-actions.vue"

const userStore = useUserStore()
const router = useRouter()
const loading = ref(true)
const range = ref(null)
const showForm = ref(false)
const reviewList = ref([])
const reviewList1 = ref([])
const type1 = ref('1')
const type2 = ref('2')
const searchCondition=ref({
    orderId: '',
    productName: "",
    shopId:'-1',
})
const showFrom=ref(false)
const checkedRowKeysRef = ref([]);
const handleCheck = (rowKeys) => {
    checkedRowKeysRef.value = rowKeys;
}
const shops = ref([
    {
        label: '全部',
        value: "-1",
    }
])
const columns = [
  {
    type: 'selection',
    fixed: 'left',
  },
  {
    key: 'colId',
    title: '序号',
    width: 40,
  },
  {
    key: 'id',
    title: '评价编号',
    width: 65,
  },
  {
    key: 'orderId',
    title: '订单编号',
    width: 65,
  },
    {
      key: 'product',
      title: '产品名称',
      width: 200,
        render(row) {
        return h(
            'a',
            {
                onClick: () => navigateToProductDetail(row.product),
                style: {
                    color: '#358BFF',
                    cursor: 'pointer',
                },
            },
            row.product["name"]
        )
    },
    },
    {
      key: 'shopName',
      title: '店铺',
      width: 100,
    },
    {
        key: 'likeCount',
        title: '点赞数',
        width: 60,
    },
    {
        key: 'grade',
        title: '评级',
        width: 60,
    },
    {
        key: 'content',
        title: '评价内容',
        width: 300,

    },
    {
        key: 'customerName',
        title: '买家名称',
        width: 100,
    },
    {
        key: 'createTime',
        title: '评价时间',
        width: 100,
    },
    {
        key: 'admin',
        title: '操作',
        width: 120,
        render(row) {
            return h(
                ReviewActions,
                {
                    onClickEdit: () => onEdit(row),
                    onClickDelete: () => onDelete(row),
                }
            );
        }
    },
]
const onDelete = async (review) => {
    $dialog.confirm({
        title: '警告',
        content: '您确定删除当前评价？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
            const {id} = review
            loading.value = true
            try {
                const res = await api.deleteReview({id})
                if(res.code === 200) {
                    await queryByPage1()
                    await queryByPage2()
                    $message.success("删除评价成功！")
                }
                else {
                    $message.error(res.message)
                }
            } catch (err) {
                $message.error("删除评价失败！")
            }finally{
                loading.value = false
            }
        }
    })
}

const navigateToProductDetail = (product) => {
    console.log(product)
    localStorage.setItem('product', JSON.stringify(product))
    router.push({
        path: '/admin/category/product-detail',
    })
}

let total = 0
const paginationReactive = reactive({
    page: 1,
    pageSize: 20,
    showSizePicker: true,
    pageSizes: [20, 50, 100],
    itemCount:0,
    prefix: () => {
        return '查询出 ' + total + '条记录';
    },
    onChange: (page) => {
        paginationReactive.page = page;
        queryByPage1()
        queryByPage2()
    },
    onUpdatePageSize: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        queryByPage1()
        queryByPage2()
    }
});
const queryShopsList = async (role) => {
    loading.value = true
    try {
        const res = await api.findAllShop({
            role: role
        })
        if(res.code === 200) {
            res.data.map((item)=>{
                shops.value.push({
                    label: item.name,
                    value: item.id
                })
            })
        }
        else {
            $message.error(res.message)
        }
    } catch (err) {
        $message.error("获取店铺信息失败！")
    }finally{
        loading.value = false
    }
}
const queryByPage1 = async ()=>{
    loading.value = true
    try {
        const res = await api.findPageReview(
            {
                params: {
                    type: type1.value,
                    pageNum:paginationReactive.page,
                    pageSize:paginationReactive.pageSize,
                }
            })
        if(res.code === 200) {
            total = res.data.total
            paginationReactive.itemCount = total
            const baseCount = (paginationReactive.page - 1)*paginationReactive.pageSize
            reviewList.value = res.data.records.map((item,i)=>{
                return {...item,
                    colId: baseCount + i + 1,
                }
            })
            $message.success("获取评价成功！")
        }
        else {
            $message.error(res.message)
        }
    } catch (err) {
        $message.error("获取评价失败！")
    }finally{
        loading.value = false
    }
}
const queryByPage2 = async ()=>{
  loading.value = true
  try {
    const res = await api.findPageReview(
        {
          params: {
            type: type2.value,
            pageNum:paginationReactive.page,
            pageSize:paginationReactive.pageSize,
          }
        })
    if(res.code === 200) {
      total = res.data.total
      paginationReactive.itemCount = total
      const baseCount = (paginationReactive.page - 1)*paginationReactive.pageSize
      reviewList1.value = res.data.records.map((item,i)=>{
        return {...item,
          colId: baseCount + i + 1,
        }
      })
    }
    else {
      $message.error(res.message)
    }
  } catch (err) {
    $message.error("获取评价失败！")
  }finally{
    loading.value = false
  }
}
const rowKey = (rowData) => {
    return rowData.id
}
const deleteSelectReviews = () => {
    if(checkedRowKeysRef.value.length <= 0) {
        $message.error("当前并未选择评价！")
        return
    }
    $dialog.confirm({
        title: '警告',
        content: '您确定删除当前所选评价？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
            const ids = checkedRowKeysRef.value.join(",")
            loading.value = true
            try {
                const res = await api.deleteProductCategories({params:{ids}})
                if(res.code === 200) {
                    $message.success("删除所选评价成功！")
                    await queryByPage1()
                    await queryByPage2()
                }
                else {
                    $message.error(res.message)
                }
            } catch (err) {
                $message.error("删除所选评价失败！")
            }finally{
                loading.value = false
            }
        },
    })
}
onMounted(()=>{
    queryShopsList()
    queryByPage1()
    queryByPage2()
})
</script>
<style scoped>
.card-tabs .n-tabs-nav--bar-type {
    padding-left: 4px;
}
</style>